const path=require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const CleanWebpackPlugin=require("clean-webpack-plugin");//自动清除dist文件
const webpack=require("webpack");
module.exports={
    entry:{
        index:"./src/js/index.js",
        detail:"./src/js/detail.js"
    },
    output:{
        filename:"./js/[name].[hash].js",
        path:path.resolve(__dirname,"./dist")
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/preset-env"]
                    }
                }
            },
            {
                test:/\.scss$/,
                use:ExtractTextPlugin.extract({
                    fallback:"style-loader",
                    use:["css-loader","sass-loader"],
                })
            },
            {
                test:/\.(jpg|png|svg|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:1234,
                        name:"img/[name].[ext]",
                        filename:"/"
                    }
                }
            },
            {
                test:/\.html$/,
                use:{
                    loader:"html-loader",
                    options:{
                        filename:"img/[name].[ext]",
                        attrs:["img:src"]
                    }
                }
            }

        ]
    },
    plugins:[
        new CleanWebpackPlugin("./dist"),
        new ExtractTextPlugin({
            filename:"css/[name].css",
            // disable:true,
        }),
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            title:"首页",
            chunks:["index"],
            inject:true,
            filename:"index.html"
        }),
        new webpack.HotModuleReplacementPlugin({//模块热更新

        })
    ],
    devServer:{
        port:9099,
        open:true,
        before(app){
            app.get("/api/list",((resolve,reject)=>{
                res.json({code:1,msg:"123"})
            }))
        },
        //resolve简化路径
        // proxy:{
        //     "/classify":"http://localhost:3000"//将class的借口代理到3000端口
        // }
        hot:true,
       //方便调试，上线，开发环境调试使用cheap-module-eval-source-map
        
    },
    devtool:"cheap-module-eval-source-map",
    resolve:{
        alias:{//绝对路径
            //@简化路径精准到文件夹
            //精准匹配精准到文件
            // "@":path.resolve(__dirname,"./src/scss"),
            "xyz":path.resolve(__dirname,"./src/scss/index.scss")
        },
        extensions:[".js",".scss"]//自动识别文件后缀
    }
}